<template>
    <page-header-wrapper>
        <a-card :bordered="false" style="margin-bottom: 20px" title="搜索查询">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-form-item label="类型">
                        <!-- <a-input v-model="queryParam.title"></a-input> -->
                        <a-select placeholder="请选择" v-model="queryParam.type" style="width: 200px">
                            <a-select-option  value="">全部</a-select-option>
                            <a-select-option  value="0">中央网信办业务系统专区</a-select-option>
                            <a-select-option  value="1">浙江省网信办业务系统专区</a-select-option>
                            <a-select-option  value="3">宁波市网信办业务系统专区</a-select-option>
                            <a-select-option  value="2">平台专区</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="">
                        <a-button style="margin-left: 10px" type="primary"
                                  @click="onSearch">
                            查询
                        </a-button>
                        <a-button style="margin-left: 10px"
                                  @click="onReset">
                            重置
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </a-card>
        <a-card :bordered="false">
            <div class="table-operator">
                <div>
                    <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                rowKey="id"
                @change="handleChange"
            >
                <span slot="status" slot-scope="text, record">
                    <a-tag v-if="status[text]" :color="status[text].color">{{ status[text].label}}</a-tag>
                </span>
                <span slot="action" slot-scope="text, record">
                    <template>
                        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                        <a-button type="link" v-if="record.status == 0" @click="handleConfirm($event, {...record, status: 1})">上架</a-button>
                        <a-button style="color: red" type="link" v-else-if="record.status == 1" @click="handleConfirm($event, { ...record, status: 0})">下架</a-button>
                        <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                                    @confirm="handleDelete(record)">
                        <a-button style="color: red" type="link">删除</a-button>
                        </a-popconfirm>
                    </template>
                </span>
                <span slot="type" slot-scope="text, record">
                    {{type[text]}}
                </span>
            </a-table>
        </a-card>
        <a-modal
            :confirmLoading="modalLoading.loading1"
            :title="modalTitle.title1"
            :visible="modalShow.show1"
            :width="640"
            @cancel="handleCancel"
            @ok="handleConfirm"
        >
            <a-form-model
                v-if="modalShow.show1"
                ref="ruleForm1"
                :model="modalForm.ruleForm1"
                :rules="modalRules.rules1"
                style="margin-bottom:20px"
                v-bind="formItemLayout"
            >
                <a-form-model-item label="链接标题" prop="title">
                    <a-input v-model="modalForm.ruleForm1.title" placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="链接地址" prop="link">
                    <a-input v-model="modalForm.ruleForm1.link" placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="类型" prop="type">
                    <a-select placeholder="请选择" v-model="modalForm.ruleForm1.type" style="width: 200px">
                        <a-select-option  :value="0">中央网信办业务系统专区</a-select-option>
                        <a-select-option  :value="1">浙江省网信办业务系统专区</a-select-option>
                        <a-select-option  :value="3">宁波市网信办业务系统专区</a-select-option>
                        <a-select-option  :value="2">平台专区</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item v-if="submitType == 'edit'" label="状态" prop="status" placeholder="请选择">
                    <a-select v-model="modalForm.ruleForm1.status">
                      <a-select-option :value="0">下架</a-select-option>
                      <a-select-option :value="1">上架</a-select-option>
                    </a-select>
                </a-form-model-item>
                <!-- <a-form-model-item label="统一信用社代码" prop="creditCode">
                    <a-input v-model="modalForm.ruleForm1.creditCode" placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="采集质量" prop="status">
                    <a-select v-model="modalForm.ruleForm1.status">
                      <a-select-option :value="0">普通</a-select-option>
                      <a-select-option :value="1">良好</a-select-option>
                      <a-select-option :value="2">优秀</a-select-option>
                    </a-select>
                </a-form-model-item> -->
                <!-- <a-form-model-item label="是否启用" prop="description">
                    <a-switch v-model="modalForm.ruleForm1.status"/>
                </a-form-model-item> -->
            </a-form-model>
        </a-modal>
    </page-header-wrapper>
</template>
<script>
import basic from '@/mixins/basic'
import {getMsgIfPage, updateWebLink, addWebLink, deleteWebLink, getWebLinksPageLists} from '@/api/manage'

export default {
    mixins: [basic],
    data() {
        return {
            request: {
                page: getWebLinksPageLists,
                update: updateWebLink,
                add: addWebLink,
                delete: deleteWebLink
            },
            submitType: 'add',
            queryParam: {},
            resetQueryParam: {},
            type: {
                0: '中央网信办业务系统专区',
                1: '浙江省网信办业务系统专区',
                2: '平台专区',
                3: '宁波市网信办业务系统专区'
            },
            status: {
                0: {
                    label: '已下架',
                    color: '#bbb'
                },
                1: {
                    label: '已上架',
                    color: 'blue'
                }
            },
            columns: [
                // {
                //     align: 'center',
                //     title: '序号',
                //     dataIndex: 'index',
                //     scopedSlots: { customRender: 'index' }
                // },
                {
                    align: 'center',
                    title: '标题',
                    dataIndex: 'title',
                },
                {
                    align: 'center',
                    title: '地址',
                    dataIndex: 'link',
                    // scopedSlots: { customRender: 'id' }
                },
                {
                    align: 'center',
                    title: '类型',
                    dataIndex: 'type',
                    scopedSlots: { customRender: 'type' }
                },
                {
                    align: 'center',
                    title: '状态',
                    dataIndex: 'status',
                    scopedSlots: { customRender: 'status' }
                },
                {
                    align: 'center',
                    title: '创建人',
                    dataIndex: 'createBy'
                },
                {
                    align: 'center',
                    title: '修改人',
                    dataIndex: 'updateBy'
                },
                {
                    align: 'center',
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            tableData: [],
            modalForm: {
                ruleForm1: {
                    // id: undefined,
                    // accessKeyId: '',
                    // accessKeySecret: '',
                    status: 0
                },
            },
            modalResetForm: {
                ruleForm1: {
                    // id: undefined,
                    // accessKeyId: '',
                    // accessKeySecret: '',
                    // status: true
                }
            },
            modalRules: {
                rules1: {
                    accessKeyId: [{required: true, message: '输入不能为空'}],
                    accessKeySecret: [{required: true, message: '输入不能为空'}],
                }
            }
        }
    },
    methods: {
        formattData(data) {
            
        },

        handleCopy(id){
            const range = document.createRange();
            range.selectNode(document.getElementById(id)); //获取复制内容的 id 选择器
            const selection = window.getSelection();  //创建 selection对象
            if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
            selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
            document.execCommand('copy'); //复制选中的文字到剪贴板
            this.$message.success('复制成功')
            selection.removeRange(range); // 移除选中的元素
        },

        handleChangeSwitch(value, record) {
            this.request
                .update({
                    id: record.id,
                    accessKeyId: record.accessKeyId,
                    accessKeySecret: record.accessKeySecret,
                    status: record.status ? 0 : 1
                })
                .then(res => {
                    this.$message.success('修改状态成功')
                })
                .catch(() => {
                    record.status = !record.status
                })
        },
        handleEdit(rowItem) {
            this.modalForm.ruleForm1 = rowItem
            this.modalTitle.title1 = '修改'
            this.modalShow.show1 = true
            this.submitType = 'edit'
        },
        handleAdd() {
            this.modalForm.ruleForm1 = {
                status: 0
            }
            this.modalShow.show1 = true
            this.submitType = 'add'
            this.modalTitle.title1 = '新增'
        },
        handleConfirm(e, record) {
            if(record) {
                const { id, title, link, type, status } = record || this.modalForm.ruleForm1
                    this.modalLoading.loading1 = true
                    this.request[id ? 'update' : 'add']({ id, title, link, type, status }).then(res => {
                        this.$message.success('操作成功')
                        this.modalLoading.loading1 = false
                        this.onValidate('ruleForm1')
                        this.modalShow.show1 = false
                        this.onSearch()
                    }).catch(() => {
                        this.modalLoading.loading1 = false
                })
                return
            }
            this.$refs.ruleForm1.validate((valid) => {
                if (valid) {
                    const { id, title, link, type, status } = record || this.modalForm.ruleForm1
                    this.modalLoading.loading1 = true
                    this.request[id ? 'update' : 'add']({ id, title, link, type, status }).then(res => {
                        this.$message.success(res.msg)
                        this.modalLoading.loading1 = false
                        this.onValidate('ruleForm1')
                        this.modalShow.show1 = false
                        this.onSearch()
                    }).catch(() => {
                        this.modalLoading.loading1 = false
                    })
                }
            })
        }
    }
}
</script>
